<!-- 大标题 -->
<template>
    <span class="hsa-title-box">
        <section class="hsa-title-box__mark"></section>
        <section v-if="!$slots.default">{{ title }}</section>
        <section v-else>
            <slot></slot>
        </section>
    </span>
</template>

<script setup lang="ts">
    // 组件配置
    defineOptions({
        name: 'HsaTitleBox'
    })

    // 组件属性
    defineProps({
        // 标题
        title: {
            type: String,
            default: ''
        }
    })
</script>

<style lang="scss">
    .hsa-title-box {
        color: #303133;
        cursor: auto;
        border: none;
        height: 18px;
        line-height: 18px;
        font-size: 16px;
        font-weight: 700;

        // display: flex;
        >* {
            display: inline-block;
            vertical-align: middle;
            height: 16px;
        }
    }

    // 标记
    .hsa-title-box__mark {
        width: 6px;
        margin-right: 4px;
        background-color: #1b65b9;
    }
</style>